<template>
	<view class="w-100 bottom-index animate__fadeIn dh-0-6s min-h-100">
		<!-- 加载中蒙版 -->
		<uni-transition mode-class="fade" :duration="500" :show="!dataLoaded" custom-class="vague-bg-9 mask-load">
		</uni-transition>
		<!-- 背景 -->
		<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/pagea-bg.jpg"
			class="img-bg w-100 ">
		</image>
		<view
			:style="{position:'sticky',height:menuObject.height + menuObject.top +8 + 'px',width:'100%',zIndex:'2',opacity: topBacOpacity || 0,top:0}"
			class="bac-col-f w-100"></view>
		<!-- 今日天气 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="flex-dir-row ml-20 pos-fixed"
			:style="{ top: menuObject.top -3 + 'px', opacity: iconOpacity ,zIndex:9}">
			<image @click="$NavigateTo('/pages/user/myPage')" :src="(userInfo.avatar_file && userInfo.avatar_file.url) 
				      ? userInfo.avatar_file.url 
				      : 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
				mode="aspectFill" class="br-200"
				:style="{height:menuObject.height + 6 + 'px',width:menuButtonObject.height+ 6 + 'px',border:'4rpx solid #fff'}">
			</image>
			<view class="fs-26 ml-10">
				<view class="">{{userInfo.nickname?userInfo.nickname + ',您好' : '您好'}}</view>
				<view class="flex-dir-row ali-item-cen fs-22">
					<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/tq_q.png"
						class="img-25"></image>
					<text class="ml-5">{{weatherData.data?weatherData.data[1].weather:'多云'}}</text>
					<text class="ml-5">|</text>
					<text class="ml-5">{{weatherData.data?weatherData.data[1].temperature:'16~24'}}℃</text>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 搜索框 -->
		<view class="search col-0a2e36 flex-dir-row ali-item-cen w-100"
			:style="{ top: menuButtonObject.top + 'px',width: searchWidth + 'rpx' ,height:menuButtonObject.height+'px',position:searchPosition,background: iconOpacity == 0?'#0a2e360a':'#fff'}">
			<text class="iconfont ic-sousuo col-00ba31 fs-40 mr-10"></text>
			<input class="fs-24 w-100" type="text" confirm-type="search" v-model="searchText" placeholder="点击搜索活动"
				placeholder-style="color:#0a2e365e" @confirm="fuzzySearch" />
			<text v-if="searchText.length" class="iconfont  ic-qingchu fs-40 col-0a2e36" @click="clearIcon" />
		</view>
		<!-- 城市选择 -->
		<unicloud-city-select ref="citySelect" :hot-city="hotCity" :location="false"
			@select="select"></unicloud-city-select>
		<view class="w-100 animate__fadeIn dh-0-4s mt-20" style="overflow-x: hidden;">
			<view class="ping-20 ">
				<z-swiper v-model="bannerList" :options="options">
					<z-swiper-item v-for="(item,index) in bannerList" :key="index">
						<image @click="$NavigateTo(item.open_url)" class="image br-20"
							:src="item.bannerfile?item.bannerfile:'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp'"
							mode="aspectFill"> </image>
					</z-swiper-item>
				</z-swiper>
			</view>
			<view class="w-100 vague-bg-8" style="border-top-right-radius: 40rpx;border-top-left-radius: 40rpx;">
				<view class="flex-dir-row ali-item-cen flex-x-bet">
					<v-tabs ref="tabs" field="name" height="80rpx" :zIndex="1" bgColor="#ffffff00" fontSize="30rpx"
						boxTop="45rpx" :boxWidth="20" lineHeight="18rpx" pillsStyle="box" activeFontSize="32rpx"
						activeColor="linear-gradient(to right, #000000, #000000)"
						color="linear-gradient(to right, #000000, #000000)" bold
						lineColor="linear-gradient(to right, #14cc60 80%, #ffffff)" :value="current"
						paddingItem="0rpx 20rpx" :tabs="activityTypeList" @change="changeTab"></v-tabs>
				</view>
				<view class="ping-20 pt-0 pos-rela " style="min-height: 55vh;">
					<view class="flex-dir-row ali-item-cen fs-26 mt-10 fwrap-wr">
						<view @click="switchCity" class="br-200 state-btn mb-20 text-ali-c mr-20 box-nw text-element-1">
							{{ cityName }}
						</view>
						<view @click="openCalendar"
							class="br-200 state-btn mb-20 text-ali-c mr-20 box-nw text-element-1">
							{{ timeName }}
						</view>
						<view @click="openStatePopup"
							class="br-200 state-btn mb-20 text-ali-c mr-20 box-nw text-element-1">
							{{ stateName }}
						</view>
					</view>
					<!-- 如果活动列表为空 -->
					<view v-if="activityData.length == 0 || filteredActivityData.length == 0"
						class="activity-empty-box">
						<image class="activity-empty-image"
							src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/activity-mepty.png"
							mode="scaleToFill" />
						<view class="fs-28" :class="cityName == '全国' ? 'fw-600' : 'col-b1'">暂无活动</view>
						<view v-if="cityName != '全国'" @click="cityName = '全国'" class="fs-28 fw-600 col-00ba31 mt-10">
							切换地区为全国</view>
					</view>
					<view v-else>
						<view v-for="(item, index) in filteredActivityData" :key="index"
							class="bac-col-f br-20 ping-20 box-nw animate__fadeIn dh-0-4s"
							:class="index != activityData.length - 1 ? 'mb-20' : ''"
							@click="$NavigateTo(`../detail/detail?id=${item._id}`)">
							<view class="flex-dir-col">
								<view class="fs-28 flex-dir-col flex-x-bet">
									<view class="fs-34 fw-600 text-element-1">{{item.name}}</view>
									<view class="flex-dir-row ali-item-cen overflow-h mt-20">
										<view v-for="tag in item.tags" :key="tag" class="text-tips bac-col-00b">
											{{tag}}
										</view>
									</view>
									<view class="flex-dir-row ali-item-cen mr-20 mt-10">
										<view class="iconfont ic-shijianxuanzeqi mr-10 col-00ba31"></view>
										<view
											v-if="item.signup_start_time < Date.now() && item.signup_end_time > Date.now()">
											{{$formatDate(item.signup_start_time)}} -
											{{$formatDate(item.signup_end_time)}}
										</view>
										<view v-else>{{$formatDate(item.start_time)}} -
											{{$formatDate(item.end_time)}}
										</view>
									</view>
									<view class="flex-dir-row ali-item-cen mt-10">
										<view class="iconfont ic-weizhi mr-10 col-00ba31"></view>
										<view class="text-element-1">{{item.location}}</view>
									</view>
								</view>
								<view class="w-100 mt-20 ">
									<!-- 节省轮播资源，提升性能，但图时不用轮播组件 -->
									<view v-if="item.imgs.length<=1" class="pos-rela">
										<image class="br-20 w-100 img-210" :src="item.imgs[0].src" mode="aspectFill">
										</image>
										<view class="pos-abso brtl-20 brbr-20  fs-22  ping-6-10"
											style="top: 0;left: 0;z-index: 2;"
											:class="item.signup_start_time > Date.now()?'bac-col-fa col-0a2e365e':item.signup_start_time < Date.now() && item.signup_end_time > Date.now() ? 'bac-col-00b col-f' : item.start_time < Date.now() && item.end_time > Date.now() ? 'bac-col-ffd col-f' : item.start_time > Date.now() ? 'bac-col-4e col-f' : 'bac-col-fa col-0a2e365e'">
											{{item.signup_start_time > Date.now()?'未开启':item.signup_start_time < Date.now() && item.signup_end_time > Date.now() ? '报名中' : item.start_time < Date.now() && item.end_time > Date.now() ? '进行中' : item.start_time > Date.now() ? '待进行' : '已结束'}}
										</view>
									</view>
									<view v-else>
										<z-swiper ref="zSwiper" v-model="item.imgs" :options="activityImgOptions">
											<z-swiper-item v-for="(img,i) in item.imgs" :key="i">
												<view class="pos-rela">
													<image class="br-20 w-100 img-210" :src="img.src" mode="aspectFill">
													</image>
													<view class="pos-abso brtl-20 brbr-20  fs-22  ping-6-10"
														style="top: 0;left: 0;z-index: 2;"
														:class="item.signup_start_time > Date.now()?'bac-col-fa col-0a2e365e':item.signup_start_time < Date.now() && item.signup_end_time > Date.now() ? 'bac-col-00b col-f' : item.start_time < Date.now() && item.end_time > Date.now() ? 'bac-col-ffd col-f' : item.start_time > Date.now() ? 'bac-col-4e col-f' : 'bac-col-fa col-0a2e365e'">
														{{item.signup_start_time > Date.now()?'未开启':item.signup_start_time < Date.now() && item.signup_end_time > Date.now() ? '报名中' : item.start_time < Date.now() && item.end_time > Date.now() ? '进行中' : item.start_time > Date.now() ? '待进行' : '已结束'}}
													</view>
												</view>
											</z-swiper-item>
										</z-swiper>
									</view>

								</view>
							</view>
							<view class="flex-dir-row flex-x-bet ali-item-cen pt-20 mt-20 bor-top-f3">
								<view class="flex-dir-row ali-item-cen  col-b1">
									<view class="flex-dir-row ali-item-cen">
										<image v-for="(usimg,its) in item.user_info.slice(0,4)" :key="its"
											:src="usimg.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
											:style="{marginLeft: its == 0?0:'-20rpx'}" mode="aspectFill"
											class="img-50 br-200">
										</image>
									</view>
									<view class="ml-10 fs-24">
										{{item.user_info.length?item.user_info.length+'人已报名' : ''}}
									</view>
								</view>
								<view class="fs-26 br-200 text-ali-c fw-600 btn-bg">
									<view class="gradient-text">报名</view>
								</view>
							</view>
						</view>
						<view class="mt-20 w-100 flex-center mb-20 text-ali-c flex-dir-row ali-item-cen">
							<image src="../../../static/logo.png" class="bot-logo"></image>
							<image src="../../../static/name.png" class="bot-name" mode="scaleToFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		name: 'pageA',
		props: {
			scrollTop: {
				type: Number,
				required: 0
			},
			page: {
				type: Number,
				required: 0
			},
			pageSize: {
				type: Number,
				required: 10
			},
			refresh: {
				type: Boolean,
				required: false
			}
		},
		computed: {
			userInfo() {
				return store.userInfo //用户信息
			},
			filteredActivityData() {
				// 先按城市筛选
				const cityFiltered = this.activityData.filter(item => this.filterCityName(item.location));
				// 如果用户选择了时间范围，按报名开始时间筛选，判断是否在选择的时间范围内
				const signupFiltered = this.before && this.after ? cityFiltered.filter(item => {
					const itemTime = new Date(item.signup_start_time).getTime();
					return itemTime >= this.before && itemTime <= this.after;
				}) : cityFiltered;
				// 再按状态筛选
				return signupFiltered.filter(item => {
					if (this.activeState === 0) return true;
					if (this.activeState === 1) return item.signup_start_time < Date.now() && item
						.signup_end_time > Date.now();
					if (this.activeState === 2) return item.start_time < Date.now() && item.end_time > Date.now();
					if (this.activeState === 3) return item.end_time < Date.now();
					return true;
				});
			}
		},
		data() {
			return {
				searchText: '', //搜索内容
				searchWidth: 710, //搜索框宽度
				searchPosition: 'sticky',
				menuButtonObject: {}, //菜单按钮对象
				iconOpacity: 1, // 初始透明度为 1（完全显示）
				topBacOpacity: 0, // 初始透明度为 0（完全隐藏）
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				weatherData: {}, //当前天气数据
				options: { //文档地址https://v2.swiper.zebraui.com/component/
					autoplay: {
						disableOnInteraction: false, //用户手动切换后是否停止
					},
					loop: true, //无限循环
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							origin: 'left center',
							translate: ['-5%', 0, -200],
							rotate: [0, 100, 0],
						},
						next: {
							origin: 'right center',
							translate: ['5%', 0, -200],
							rotate: [0, -100, 0],
						}
					}
				},
				activityImgOptions: {
					loop: false, //无限循环
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							origin: 'left center',
							translate: ['-5%', 0, -200],
							rotate: [0, 100, 0],
						},
						next: {
							origin: 'right center',
							translate: ['5%', 0, -200],
							rotate: [0, -100, 0],
						}
					}
				},
				current: 0, //当前tab索引
				activityTypeList: [], //活动分类
				activeState: 0, //活动状态
				cityName: '全国', //城市名称
				timeName: '时间', //时间名称
				stateName: '状态', //状态名称
				bannerList: [], //轮播图数据
				activityData: [], //活动列表数据
				pageStop: false, //分页是否停止
				dataLoaded: false, //数据是否加载完成
				// 热门城市
				hotCity: [{
						code: "000000",
						name: "全国"
					},
					{
						code: "310100",
						name: "上海"
					},
					{
						code: "330100",
						name: "杭州"
					},
					{
						code: "440100",
						name: "广州"
					},
					{
						code: "440300",
						name: "深圳"
					},
					{
						code: "320100",
						name: "南京"
					},
					{
						code: "500100",
						name: "重庆"
					},
					{
						code: "510100",
						name: "成都"
					}
				],
				before: '', // 开始时间
				after: '', // 结束时间
				stateList: ['全部', '报名中', '进行中', '已结束'],
			}
		},
		watch: {
			//监听分页页码
			page(e) {
				if (e != 0) {
					this.getActivityData();
				}
			},
			scrollTop(e) {
				// #ifdef MP-WEIXIN
				let scrollTop = e; // 滚动条距离顶部高度
				// 动态计算 searchWidth，并确保它不超过710
				this.searchWidth = Math.min(
					710, // 最大值
					scrollTop < 50 ? 710 - (Number(scrollTop)) : 710 - (this.menuObject.width * 2)
				);
				// 动态计算 menuButtonObject.top
				const initialTop = this.menuObject.top + this.menuObject.height + 15; // 初始值
				const targetTop = this.menuObject.top; // 目标值
				const scrollThreshold = 50; // 滚动阈值
				this.iconOpacity = 0 + (scrollTop / scrollThreshold); // 透明度从 0 逐渐变为 1
				this.topBacOpacity = 1 + (scrollTop / scrollThreshold); // 透明度从 1 逐渐变为 0

				if (scrollTop > 0 && scrollTop <= scrollThreshold) {
					// 在滚动距离小于阈值时，动态计算 top 值
					this.menuButtonObject.top = initialTop - (scrollTop * (initialTop - targetTop) / scrollThreshold);
					// 动态计算透明度
					this.iconOpacity = 1 - (scrollTop / scrollThreshold); // 透明度从 1 逐渐变为 0
					this.topBacOpacity = 0 + (scrollTop / scrollThreshold); // 透明度从 0 逐渐变为 1
				} else if (scrollTop > scrollThreshold) {
					this.menuButtonObject.top = targetTop;
					this.iconOpacity = 0; // 完全隐藏
					this.topBacOpacity = 1; // 完全显示

				} else {
					this.menuButtonObject.top = initialTop;
					this.iconOpacity = 1; // 完全显示
					this.topBacOpacity = 0; // 完全隐藏
				}
				// #endif
			},
			refresh(e) {
				if (e) {
					// 重置所有数据
					this.dataLoaded = false;
					this.searchText = '';
					this.current = 0; //当前tab索引
					this.activeState = 0; //活动状态
					this.pageStop = false; //分页停止
					this.$emit('resetPage', 0) //重置分页页码
					this.$nextTick(() => { //等待数据更新
						//查询今日天气
						// this.getWeather();
						// 获取轮播图数据
						this.getBannerData();
						//获取活动分类
						this.getActivityType();
						// 获取活动数据
						this.getActivityData()
					})
				}
			}
		},
		//页面加载
		mounted() {
			// #ifdef MP-WEIXIN
			this.menuButtonObject = uni.getMenuButtonBoundingClientRect();
			this.menuButtonObject.top = this.menuObject.top + this.menuObject.height + 15;
			// #endif
			// #ifndef MP-WEIXIN
			this.menuButtonObject = 0;
			// #endif
			//查询今日天气
			// this.getWeather();
			// 获取轮播图数据
			this.getBannerData();
			//获取活动分类
			this.getActivityType();
			// #ifdef MP-WEIXIN
			// 获取用户当前坐标位置信息
			this.getUserLocation();
			// #endif
			// #ifdef H5
			// h5定位不准,为避免加载耗时直接请求活动列表,也可跟微信走同一个方法
			this.getActivityData();
			// #endif
		},
		methods: {
			// 获取用户当前坐标位置信息
			getUserLocation() {
				const that = this;
				// 先从缓存获取位置信息
				const cachedLocation = uni.getStorageSync('userLocation');
				if (cachedLocation) {
					this.cityName = cachedLocation;
					this.getActivityData();
					return;
				}

				uni.getLocation({
					type: 'wgs84',
					success: async (res) => {
						await that.getCityFromCoords(res.latitude, res.longitude)
					},
					fail: (err) => {
						that.dataLoaded = true;
						that.getActivityData();
						that.$Toast('未获得位置权限，无法获取你所在城市活动信息')
						console.log('err', err)
					}
				});
			},

			// 获取中国所有城市坐标位置数据
			async getCityFromCoords(lat, lon) {
				let cityBoundaryData;
				try {
					const res = await this.$Route('get-public-data').getCityBoundary();
					cityBoundaryData = res.data;
				} catch (err) {
					this.dataLoaded = true;
					this.getActivityData();
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
					return;
				}

				this.cityName = await this.findCityByLocation([lon, lat], cityBoundaryData);
				// 缓存用户所在城市，如果为全国，则不缓存
				if (this.cityName != "全国") {
					uni.setStorageSync('userLocation', this.cityName);
				}
				this.getActivityData();
			},

			// 判断点是否在城市多边形内 - 使用射线法优化
			isPointInPolygon(point, polygon) {
				const [px, py] = point;
				let inside = false;

				for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
					const [xi, yi] = polygon[i];
					const [xj, yj] = polygon[j];

					const intersect = ((yi > py) !== (yj > py)) &&
						(px < (xj - xi) * (py - yi) / (yj - yi) + xi);

					if (intersect) inside = !inside;
				}

				return inside;
			},

			// 遍历所有城市,判断当前点在哪个城市
			findCityByLocation(userLocation, cityData) {
				if (!cityData?.features?.length) return "全国";

				// 使用 find 替代 forEach 提前返回
				const city = cityData.features.find(city => {
					if (city.geometry.type !== "MultiPolygon") return false;

					// 使用 some 提前返回
					return city.geometry.coordinates.some(polygon =>
						this.isPointInPolygon(userLocation, polygon[0])
					);
				});

				return city ? city.properties.name : "全国";
			},
			//获取轮播图数据
			getBannerData() {
				this.$Route('get-public-data', true).getBanner("首页").then((res) => {
					this.bannerList = res.data;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			//获取活动分类
			getActivityType() {
				this.$Route('get-public-data', true).getActivityType().then((res) => {
					this.activityTypeList = res.data;
					//在数组前面加一个全部
					this.activityTypeList.unshift({
						id: 0,
						name: '全部',
						icon: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/tabsIcon.webp'
					});
					this.$emit('refreshState', false) //重置刷新状态
					this.$refs.tabs.update(); //适配tabs栏滑块初始位置错误问题
				}).catch((err) => {
					this.$emit('refreshState', false) //重置刷新状态
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			//获取活动数据
			getActivityData(typeId, e) {
				//定义请求参数
				let data = {
					typeId: typeId,
					page: this.page,
					pageSize: this.pageSize,
					name: e ? e.detail.value : '',
				}
				//如果搜索查询，则删除typeId
				if (e) {
					delete data.typeId;
				}
				//如果分页停止，则停止请求
				if (this.pageStop) {
					this.$Toast('没有更多数据了');
					return;
				}
				this.$Route('get-public-data').getActivityData(data).then((res) => {
					// 如果是第一页直接赋值
					if (this.page == 0) {
						this.activityData = res.data;
						this.dataLoaded = true; //数据加载完成
					} else {
						this.activityData = [...this.activityData, ...res.data];
					}
					// 分页累加,如果返回数据条数小于pageSize，则停止分页
					if (res.data.length < this.pageSize) {
						this.pageStop = true;
					}
				}).catch((err) => {
					this.dataLoaded = true; //数据加载完成
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			//切换tab
			changeTab(e) {
				this.current = e; //当前tab索引
				this.activityData = []; //清空活动数据
				this.pageStop = false; //分页停止
				this.$emit('resetPage', 0) //重置分页页码
				this.$nextTick(() => { //等待数据更新
					this.getActivityData(this.activityTypeList[e]._id);
				})
			},
			clearIcon() {
				this.searchText = '';
				this.current = 0; //当前tab索引
				this.activityData = []; //清空活动数据
				this.pageStop = false; //分页停止
				this.$emit('resetPage', 0) //重置分页页码
				this.$nextTick(() => { //等待数据更新
					this.getActivityData(this.activityTypeList[0]._id);
				})
			},
			fuzzySearch(e) {
				this.activityData = []; //清空活动数据
				this.pageStop = false; //分页停止
				this.$emit('resetPage', 0) //重置分页页码
				this.$nextTick(() => { //等待数据更新
					this.getActivityData(null, e);
				})
			},
			//天气查询接口
			getWeather() {
				this.$Route.getWeather().then(res => {
					console.log(res)
					this.weatherData = res.data;
				})
			},
			// 切换城市
			switchCity() {
				this.$refs.citySelect.open();
			},
			// 打开活动状态选择弹窗
			openStatePopup() {
				this.$emit('openStatePopup')
			},
			// 切换状态
			switchState(e) {
				this.activeState = e;
				this.stateName = this.stateList[e];
			},
			select(e) {
				//根据城市名称获取活动数据
				this.cityName = e.name;
			},
			// 正则表达式模糊筛选活动地址的城市名称
			filterCityName(location) {
				if (this.cityName == '全国') return true; // 如果没有选择城市，则不过滤
				const reg = new RegExp(this.cityName, 'i');
				return reg.test(location);
			},
			openCalendar() {
				this.$emit('openCalendar')
			},
			calendarConfirm(e) {
				// 把e.range.before（YYYY-MM-DD）和e.range.after（YYYY-MM-DD）转换为时间戳
				this.before = new Date(e.range.before).getTime();
				this.after = new Date(e.range.after).getTime();
				this.timeName = this.$formatDate2(this.before) + ' - ' + this.$formatDate2(this.after);
			},
			calendarCancel() {
				// 用户重置，清除时间戳
				this.before = '';
				this.after = '';
				this.timeName = '时间';
			}
		}
	}
</script>

<style lang="scss">
	.image {
		height: 240rpx;
		width: 100%;
	}

	.img-bg {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		box-sizing: border-box;
	}

	.img-25 {
		width: 25rpx;
		height: 25rpx;
	}

	.img-50 {
		width: 50rpx;
		height: 50rpx;
		border: 4rpx solid #ffffff;
	}

	.img-210 {
		height: 210rpx;
	}

	.search {
		border-radius: 30px;
		margin: 0 20rpx;
		padding: 20rpx;
		z-index: 98;
		transition: background 0.3s ease-in-out;
		/* #ifndef MP-WEIXIN */
		margin-top: 30rpx;
		padding: 15rpx !important;
		background: #f8f8f8 !important;
		/* #endif */
	}


	.text-tips {
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 20rpx;
		margin-right: 10rpx;
	}

	.state-btn {
		padding: 0 30rpx;
		height: 50rpx;
		line-height: 50rpx;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.state-btn:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
	}
</style>